import { type ColumnDef } from '@tanstack/react-table'
import { cn } from '@/lib/utils'
// import { Badge } from '@/components/ui/badge'
import { Checkbox } from '@/components/ui/checkbox'
import LongText from '@/components/long-text'
// import { callTypes } from '../data/data'
import { type Rule } from '../data/schema'
import { DataTableColumnHeader } from '@/components/data-table-column-header'
import { DataTableRowActions } from './table-row-actions'
import {
  TriangleDownIcon,
  TriangleRightIcon
} from '@radix-ui/react-icons'
export const columns: ColumnDef<Rule>[] = [
  {
    id: 'select',
    header: ({ table }) => (
      <Checkbox
        checked={
          table.getIsAllPageRowsSelected() ||
          (table.getIsSomePageRowsSelected() && 'indeterminate')
        }
        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
        aria-label='Select all'
        className='translate-y-[2px]'
      />
    ),
    meta: {
      className: cn(
        'sticky md:table-cell left-0 z-10 rounded-tl',
        'bg-background group-hover/row:bg-muted group-data-[state=selected]/row:bg-muted'
      ),
    },
    cell: ({ row }) => (
      <Checkbox
        checked={row.getIsSelected()}
        onCheckedChange={(value) => row.toggleSelected(!!value)}
        aria-label='Select row'
        className='translate-y-[2px]'
      />
    ),
    enableSorting: false,
    enableHiding: false,
  },
  {
    accessorKey: 'id',
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title='ID' />
    ),
    cell: ({ row }) => (
      <div className='w-fit text-nowrap'>{row.getValue('id')}</div>
    ),
    enableSorting: false,
    enableHiding: false,
  },
  {
    accessorKey: 'title',
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title='Title' />
    ),

    cell: ({ row }) => (
      <div
        style={{
          paddingLeft: `${row.depth}rem`,
        }}
      >
        <div className='w-fit text-nowrap flex  items-center gap-0.5' >
          {row.getCanExpand() && (
            <button {...{
              onClick: row.getToggleExpandedHandler(),
              style: { cursor: 'pointer' },
            }}>
              {row.getIsExpanded() ? <TriangleDownIcon className='mr-2 h-3.5 w-3.5' /> : <TriangleRightIcon />}
            </button>
          )}
          <LongText className='max-w-36'>{row.getValue('title')}</LongText>
        </div>
      </div>
    ),
    enableSorting: false,
    enableHiding: false,
  },
  {
    accessorKey: 'icon',
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title='Icon' />
    ),

    cell: ({ row }) => (
      <LongText className='max-w-36'>{row.getValue('icon')}</LongText>
    ),
    enableSorting: false,
    enableHiding: false,
  },
  {
    accessorKey: 'key',
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title='key' />
    ),
    meta: {
      className: cn(
        'min-w-40'
      ),
    },
    cell: ({ row }) => (
      <LongText className='max-w-38'>{row.getValue('key')}</LongText>
    ),
    enableSorting: false,
    enableHiding: false,
  },
  {
    accessorKey: 'href',
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title='url' />
    ),
    meta: {
      className: cn(
        'min-w-40'
      ),
    },
    cell: ({ row }) => (
      <LongText>{row.getValue('href')}</LongText>
    ),
    enableSorting: false,
    enableHiding: false,
  },
  {
    accessorKey: 'type',
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title='Type' />
    ),
    cell: ({ getValue }) => (
      <div className='w-fit text-nowrap'>{getValue<string>()}</div>
    ),
    enableSorting: false,
    enableHiding: false,
  },
  {
    accessorKey: 'weight',
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title='Sort' />
    ),
    cell: ({ getValue }) => (
      <div className='w-fit text-nowrap'>{getValue<string>()}</div>
    ),
    enableSorting: false,
    enableHiding: false,
  },

  {
    id: 'actions',
    cell: DataTableRowActions,
  },
]
